function Swiper (el){
    this.el=document.querySelector(el)
    this.page = this.el.querySelectorAll('ul li')
    this.t = null
    this.num = 1
    this.init()
}   

Swiper.prototype.init = function () {
    this.autoPlay()
    this.mouseover()
    this.mouseout()
}


Swiper.prototype.autoPlay = function () {
    this.t=setInterval(()=>{
       this.num++
        if(this.num>6) this.num = 1
        this.el.querySelector('img').src=`./imgs/img${this.num}.jpg`
        this.el.querySelector('ul li.active').className = ''
        this.el.querySelector(`ul li:nth-of-type(${this.num})`).className = 'active'
    },1000)
}


Swiper.prototype.mouseover = function () {
    this.page.forEach( (item,i) =>{
        item.onmouseover =  () => {
            clearInterval(this.t)
            this.num = i + 1
            this.el.querySelector('img').src=`./imgs/img${this.num}.jpg`
            this.el.querySelector('ul li.active').className = ''
            this.el.querySelector(`ul li:nth-of-type(${this.num})`).className = 'active'
        }
    })
}


Swiper.prototype.mouseout = function () {
    this.page.forEach(item =>{
        item.onmouseout = () => {
            this.autoPlay()
        }
    })
}